<template>
  <div class="music-container" >
      <div :class="['show',{'rotate':isPlaying}]" @click="onToggle"></div>
      <div class="hide">
        <audio :src="src" ref="audio" autoplay></audio>
      </div>
  </div>
</template>

<script>
export default {
  name: 'music',
  props: {
    src:''
  },
  data(){
      return {
          isPlaying:true
      }
  },
  mounted(){
    
    
  },
  methods:{
      onToggle(){
          let audio=this.$refs.audio
          if(audio.paused){
            audio.play()
            this.isPlaying=true
          }else{
            audio.pause()
             this.isPlaying=false
          }
          
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.music-container .show{
  display: inline-block;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: url(../assets/images/icon/music.png) no-repeat;
  background-size: 100% 100%;
}
.rotate{
    animation:turn 2s linear infinite; 
}
@keyframes turn{
      0%{transform:rotate(0deg);}
      25%{transform:rotate(90deg);}
      50%{transform:rotate(180deg);}
      75%{transform:rotate(270deg);}
      100%{transform:rotate(360deg);}
    }
.music-container .hide{
    display: none;
}




</style>
